<template>
	<view class="SOdetiles">
		<!-- <u-navbar title="派单详情" :background="background" title-color="#FFF" back-icon-color="#fff"></u-navbar> -->
		<view class="SOdetiles-table">
			<view class="DWD-li">
				<view class="DWD-li-title">单号</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460NO || '' }}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">配送地</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460CA01 || '' }}</view>
			</view>
			<view class="DWD-li" v-if="userinfo.ORMTB410CB06 == '1'">
				<view class="DWD-li-title">代发扣款账户</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB410CA00 || '' }}</view>
			</view>
			<view class="DWD-li" v-if="userinfo.ORMTB410CB06 == '1'">
				<view class="DWD-li-title">管理费</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460CA34 }}%</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">车型</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460CA02 }}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">厂家</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460CA04 || '' }}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">物料类型</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460CA06 || '' }}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">发单价</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460CA26 }}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">接单运费价</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460CA09 }}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">亏吨范围</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460CA25 }}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">冻结金额</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460CA12 }}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">超时时间</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460CA27 }}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">车数</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460CA08 }}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">是否公开</view>
				<view class="DWD-li-text" v-if="detailsList.ORMTB460CA31 == '1'">不公开</view>
				<view class="DWD-li-text" v-if="detailsList.ORMTB460CA31 == '2'">公开</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">是否指定</view>
				<view class="DWD-li-text" v-if="detailsList.ORMTB460CA30 == '1'">指定车辆</view>
				<view class="DWD-li-text" v-if="detailsList.ORMTB460CA30 == '2'">不指定车辆</view>
			</view>
			<view class="DWD-li" v-if="detailsList.ORMTB460CA30 == '1'">
				<view class="DWD-li-title">指定车号</view>
				<view class="DWD-li-text">{{ detailsList.ORMTB460CA90.join(",") }}</view>
			</view>
			<view class="DWD-li">
				<view class="DWD-li-title">接单冻结</view>
				<view class="DWD-li-text" v-if="detailsList.ORMTB460CA32 == '0'">不冻结</view>
				<view class="DWD-li-text" v-if="detailsList.ORMTB460CA32 == '1'">冻结</view>
			</view>
		</view>

		<u-toast ref="uToast" />
		<u-popup v-model="showComplete" mode="center" :mask-close-able="false" border-radius="10" closeable width="90%">
			<view class="" style="overflow: hidden;">
				<view class="popup_title">请输入完成订单信息</view>
				<view class="popup_cell">
					<view class="popup_cell-label">派单物料:</view>
					<view class="popup_cell-value">
						<input class="popup_cell_input" type="text" v-model="detailsList.ORMTB440CA07" disabled />
					</view>
				</view>
				<view class="popup_cell">
					<view class="popup_cell-label">单价:</view>
					<view class="popup_cell-value">
						<input v-model="detailsList.ORMTB440CA08" @input="weightInput($event, 'price')" class="popup_cell_input"
							type="number" :placeholder="detailsList.ORMTB440CA08" />
					</view>
				</view>
				<view class="popup_cell">
					<view class="popup_cell-label">毛重:</view>
					<view class="popup_cell-value">
						<input v-model="weightOpt.gross" @input="weightInput($event, 'gross')" class="popup_cell_input"
							type="number" placeholder="请输入毛重" />
					</view>
				</view>
				<view class="popup_cell">
					<view class="popup_cell-label">皮重:</view>
					<view class="popup_cell-value">
						<input v-model="weightOpt.tare" @input="weightInput($event, 'tare')" class="popup_cell_input" type="number"
							placeholder="请输入皮重" />
					</view>
				</view>
				<view class="popup_cell">
					<view class="popup_cell-label">净重:</view>
					<view class="popup_cell-value">
						<input v-model="form.ORMTB440CC04" class="popup_cell_input" type="text" placeholder="毛重-皮重" disabled />
					</view>
				</view>
				<view class="popup_cell">
					<view class="popup_cell-label">金额:</view>
					<view class="popup_cell-value">
						<input v-model="form.ORMTB440CC06" class="popup_cell_input" type="text" placeholder="单价*净重" disabled />
					</view>
				</view>
				<view class="popup_cell upload_area">
					<view class="popup_cell-label">上传磅单:</view>
					<view v-if="base64" class="upload_wrap">
						<image @click="previewImagePounds" :src="base64" mode="aspectFill" style="width: 120rpx;height: 120rpx;">
						</image>
					</view>
					<view @click="showActionSheet" class="upload_wrap">
						<u-icon name="camera-fill" size="120"></u-icon>
					</view>
				</view>
				<button @click="serve('3')" class="popup_btn">确定</button>
			</view>
		</u-popup>

		<u-modal v-model="submitShow" :show-cancel-button="true" @confirm="submitConfirm">
			<view class="slot-content">
				请确认是否{{ text }}该订单
			</view>
		</u-modal>
	</view>
</template>

<script>
import { pathToBase64, base64ToPath } from '@/js_sdk/image-tools/index.js'
import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue'
import qs from 'qs'
export default {
	components: {
		previewImage
	},
	data() {
		return {
			image: '',
			background: {
				backgroundColor: '#00a1f1',
			},
			id: '',
			detailsList: '',
			type: '',
			userinfo: JSON.parse(uni.getStorageSync('userinfo')),
			submitShow: false,
			text: '',
			AuthorizationOBJ: '',
			showComplete: false,
			weightOpt: {
				gross: '', // 毛重
				tare: '', // 皮重
			},
			form: {
				ORMTB440CC02: '', // 派单物料名称
				ORMTB440CC04: '', // 净重
				ORMTB440CC06: '', // 结算金额
			},
			base64: '', // 图片base64
			ocrRes: false
		}
	},
	watch: {
		weightOpt: {
			handler() {
				let { gross, tare } = this.weightOpt
				if (gross && tare) {
					this.form.ORMTB440CC04 = (parseFloat(gross) - parseFloat(tare)).toFixed(2)
					this.$u.debounce(this.getSettlementAmount, 500)
				} else this.form.ORMTB440CC04 = ''
			},
			deep: true
		},
		showComplete() {
			if (!this.showComplete) {
				this.base64 = ''
				this.weightOpt.gross = ''
				this.weightOpt.tare = ''
				this.form.ORMTB440CC06 = ''
			}
		}
	},
	onLoad(option) {
		if (this.userinfo.sign == 'CUS-3') {
			this.queryAuthorization()
		}
		const item = JSON.parse(decodeURIComponent(option.item));
		this.detailsList = item
		console.log(this.detailsList)
		// this.id = option.ORMTB440ID
		// this.querOrder()
	},
	mounted() { },
	methods: {
		// 预览磅单
		async previewImagePounds() {
			let path = await base64ToPath(this.base64)
			uni.previewImage({
				current: 0,
				urls: [path],
				success() { }
			})
		},
		async picBDClick() {
			uni.previewImage({
				current: 0,
				urls: [this.detailsList.ORMTB440CL01],
				success() { }
			})
		},
		async showActionSheet() {
			let [err, res] = await uni.showActionSheet({
				itemList: ['从手机相机选择', '拍一张']
			})
			if (res) {
				res.tapIndex === 0 && this.chooseImage('album')
				res.tapIndex === 1 && this.chooseImage('camera')
			}
		},
		async chooseImage(sourceType) {
			let [err, res] = await uni.chooseImage({
				count: 1,
				sourceType: [sourceType],
			});
			if (res) {
				this.base64 = await pathToBase64(res.tempFilePaths[0])
				this.uploadPounds()
			}
		},
		// 上传磅单图片
		async uploadPounds() {
			try {
				uni.showLoading({ title: '正在加载', mask: true })
				let { base64 } = this
				let [err, res] = await uni.request({
					url: `${this.baseUrl}/orm/ormtb440/poundListIdentification`,
					method: 'POST',
					dataType: 'json',
					header: { 'content-type': 'application/x-www-form-urlencoded' },
					data: qs.stringify({ image: base64 }),
				})
				if (res) {
					if (res.data.code === 200) {
						let result = res.data.data
						if (JSON.stringify(result) == "{}") {
							return uni.showToast({ title: '磅单识别失败', icon: 'none' })
						}
						this.ocrRes = true
						this.weightOpt.gross = res.data.data.gross ? res.data.data.gross : ''
						this.weightOpt.tare = res.data.data.tare ? res.data.data.tare : ''
					} else {
						uni.showToast({ title: '磅单识别失败', icon: 'none' })
					}
				}
			} catch (e) { }
			uni.hideLoading()
		},

		openConfirmPopup() {
			this.type = 3
			this.showComplete = true
		},

		weightInput(e, type) {
			let value = e.target.value
			value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
			value = value.replace(/^\./g, ""); //验证第一个字符是数字
			value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
			value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
			value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
			if (value.indexOf(".") < 0 && value != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
				value = parseFloat(value)
			}
			setTimeout(() => {
				this.$set(this.weightOpt, type, value)
			}, 0)
		},
		queryAuthorization() { //查询子账户权限
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			uni.request({
				url: this.baseUrl + '/orm/ormtb417/selectAccess/' + this.userinfo.ORMTB417ID,
				method: 'GET',
				success: (res) => {
					uni.hideLoading();
					if (res.data.code == 200) {
						this.AuthorizationOBJ = res.data.data
					} else {
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'default',
							icon: false
						})
					}
				},
				fail: (res) => {
					uni.hideLoading();
					this.$refs.uToast.show({
						title: res.errMsg,
						type: 'default',
						icon: false
					})
				}
			});
		},
		picClick() {
			this.$refs.previewImage.open(0);
		},
		// 获取结算金额
		async getSettlementAmount() {
			// let ORMTB440CC04 = ''
			// if (this.detailsList) {
			// 	ORMTB440CC04 = (parseFloat(this.detailsList.ORMTB440CA08) * parseFloat(this.form
			// 		.ORMTB440CC04).toFixed(2))
			// }
			// if (!ORMTB440CC04) return
			uni.showLoading({ mask: true })
			let [err, res] = await uni.request({
				url: this.baseUrl + '/orm/ormtb440/orderCompleteBefore',
				method: 'POST',
				dataType: 'json',
				data: {
					ORMTB440CA02: this.detailsList.ORMTB440CA02,
					ORMTB440CA04: this.detailsList.ORMTB440CA04,
					ORMTB440CC03: this.detailsList.ORMTB440CA08,
					ORMTB440CC04: this.form.ORMTB440CC04
				}
			})
			uni.hideLoading()
			if (res && res.data.code === 200) {
				this.form.ORMTB440CC06 = res.data.data
			}
		},
		// 确认完成订单
		async confirmOrderComplete() {
			uni.showLoading({ title: '正在加载', mask: true });
			uni.request({
				url: this.baseUrl + '/orm/ormtb440/orderComplete',
				method: 'POST',
				dataType: 'json',
				data: {
					ORMTB440ID: this.detailsList.ORMTB440ID, // 主键
					ORMTB440CA00: this.detailsList.ORMTB440CA00, // 客户id
					ORMTB440CC01: this.detailsList.ORMTB440CA06, // 结算物料id
					ORMTB440CC02: this.detailsList.ORMTB440CA07, // 结算物料名称
					ORMTB440CC03: this.detailsList.ORMTB440CA08, // 结算单价
					ORMTB440CC04: this.form.ORMTB440CC04, //  结算净重
					ORMTB440CC05: this.weightOpt.gross, // 毛重
					ORMTB440CC06: this.form.ORMTB440CC06, // 结算金额
					ORMTB440CH05: this.base64,
					sign: this.userinfo.sign,
				},
				success: (res) => {
					uni.hideLoading();
					if (res.data.code == 200) {
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'default',
							icon: false
						})
					}
				},
				fail: (res) => {
					uni.hideLoading();
					this.$refs.uToast.show({
						title: res.errMsg,
						type: 'default',
						icon: false
					})
				}
			});
		},
		submitConfirm() {
			if (this.type == 3) {
				this.confirmOrderComplete()
				return
			}
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			uni.request({
				url: this.baseUrl + '/orm/ormtb440/updateORMTB440CF01',
				method: 'POST',
				dataType: 'json',
				data: {
					ORMTB440CE08: this.userinfo.PERTB005CA02,
					ORMTB440ID: this.detailsList.ORMTB440ID,
					ORMTB430ID: this.detailsList.ORMTB430ID,
					ORMTB440CF01: this.type,
					ORMTB440CD01: '',
					ORMTB440CA02: this.detailsList.ORMTB440CA02,
					ORMTB440CA11: this.detailsList.ORMTB440CA11,
					ORMTB440CA12: this.detailsList.ORMTB440CA12,
					sign: this.userinfo.sign,
				},
				success: (res) => {
					uni.hideLoading();
					if (res.data.code == 200) {
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'default',
							icon: false
						})
					}
				},
				fail: (res) => {
					uni.hideLoading();
					this.$refs.uToast.show({
						title: res.errMsg,
						type: 'default',
						icon: false
					})
				}
			});
		},
		serve(type) {
			if (this.AuthorizationOBJ.ORMTB417CA05 && this.AuthorizationOBJ.ORMTB417CA05 == 0) {
				uni.showToast({
					title: '您没有操作权限',
					duration: 5000,
					icon: 'none',
				});
				return
			}
			this.submitShow = true
			this.type = type
			if (type == '-1') {
				this.text = '取消'
			} else if (type == '-2') {
				this.text = '申请取消'
			} else if (type == '3') {
				this.text = '完成'
			}
		},
		querOrder() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.detailsList = ''
			uni.request({
				url: this.baseUrl + '/orm/ormtb440/selectDetails',
				method: 'POST',
				dataType: 'json',
				data: {
					ORMTB440ID: this.id,
				},
				success: (res) => {
					uni.hideLoading();
					if (res.data.code == 200) {
						this.detailsList = res.data.data
						this.detailsList.imgList = []
						if (this.detailsList.ORMTB440CE01) {
							this.detailsList.imgList.push(this.detailsList.ORMTB440CE01)
						}
					} else {
						this.$refs.uToast.show({
							title: res.data.message,
							type: 'default',
							icon: false
						})
					}
				},
				fail: (res) => {
					uni.hideLoading();
					this.$refs.uToast.show({
						title: res.errMsg,
						type: 'default',
						icon: false
					})
				}
			});
		}
	}
}
</script>

<style scoped>
.popup_cell-photo {
	margin: 0 30rpx;
}

.photo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 20rpx;
}

.photo-img {
	width: 300rpx;
	height: 200rpx;
}

.photo-img2 {
	width: 400rpx;
	height: 400rpx;
}

.SOdetiles-table {
	/* padding: 30rpx 40rpx 0; */
}

.DWD-li {
	display: flex;
	min-height: 70rpx;
	line-height: 70rpx;
	box-sizing: border-box;
	border: 1rpx solid #F2F2F2;
	font-size: 32rpx;
	color: #333;
}

.DWD-li>view {
	padding: 0 15rpx;
	min-height: 70rpx;
	/* overflow: hidden; */
	box-sizing: border-box;
}

.DWD-li-title {
	width: 30%;
	text-align: center;
	border-right: 1rpx solid #F2F2F2;
	background: #70DBDB;
	/* background-color: rgba(0, 163, 255, .1); */
}

.DWD-li-text {
	width: 70%;
}

.DWD-li+.DWD-li {
	border-top: none;
}

.DWD-table {
	display: flex;
}

.DWD-table-left-flex {
	flex: 1;
}

.DWD-table>view>view {
	padding: 0 15rpx;
	height: 70rpx;
	line-height: 70rpx;
	overflow: hidden;
	text-align: center;
	border-right: 1rpx solid #F2F2F2;
	border-bottom: 1rpx solid #F2F2F2;
	box-sizing: border-box;
}

.DWD-table>view>view:first-child {
	background-color: rgba(0, 163, 255, .1);
}

.DWD-table-left-title>view {
	width: 101rpx;
	text-align: center;
	background-color: rgba(0, 163, 255, .1);
}

.DWD-table .DWD-table-left-title>view {
	padding: 0 5rpx;
	height: 70rpx;
	line-height: 70rpx;
	overflow: hidden;
	box-sizing: border-box;
	border-left: 1rpx solid #F2F2F2;
	border-bottom: 1rpx solid #F2F2F2;
}

.DWD-btn {
	margin: 70rpx 100rpx 0;
}

.DWD-btn button {
	background-color: #FF0000;
	color: #FFF;
	font-size: 30rpx;
}

.DWD-btn button+button {
	margin-top: 30rpx;
}

.DWD-btn .DWD-btn-color {
	background-color: #007AFF;
}

.slot-content {
	padding: 20rpx 40rpx;
}

.popup_title {
	font-size: 36rpx;
	font-weight: 700;
	text-align: center;
	padding: 30rpx;
}

.popup_cell {
	margin: 0 30rpx;
	padding: 10rpx 0;
	margin-bottom: 10rpx;
	border-bottom: 2rpx solid #ebebeb;
	display: flex;
	align-items: center;
}

.popup_cell.upload_area {
	align-items: flex-start;
}

.upload_wrap {
	margin-left: 32rpx;
	width: 120rpx;
	height: 120rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.upload_img {}

.upload_placeholder {}

.popup_cell-label {
	font-size: 30rpx;
	color: #666666;
	width: 150rpx;
	text-align: right;
}

.popup_cell_value {
	flex: 1;
}

.popup_cell_input {
	font-size: 32rpx;
	width: 100%;
	height: 60rpx;
	padding: 0 20rpx;
}

.input-placeholder {
	font-size: 30rpx;
}

.popup_btn {
	background-color: #007AFF;
	margin: 60rpx;
	color: #FFFFFF;
}
</style>
